<template>
	<view class="" style="">
		<view class="" style="padding: 10px;">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					swiperWidth="750"></u-tabs-swiper>
			</view>
			<view class="" style="height: 50rpx;">

			</view>
			<swiper style="height:550px;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<scroll-view scroll-y style="height: 1000rpx;width: 100%;" @scrolltolower="onreachBottom">
				<!-- 		<view class="">
							<view class="detailBrandside_bottom">
								<view class="detailBrandside" v-for="item in arrcreator " style=""
									@click="handeldiamondMallDetail(item.goods_id)">
									<view class="detailBrandside_box" style="">
										<view class="detailBrandside_box_top" style="">
											<image :src="item.image" class="detailBrandside_image" mode=""></image>
										</view>
										<view class="detailBrandside_bottom_text" style="">
											<image class="detailBrandside_bottom_bg"
												src="../../static/home/detailmengban.png" mode="">
											</image>
											<view class="p10">
												<view class="" style="padding: 0rpx;font-size: 12rpx;height: 200rpx;">
													<view class="size-28 fw">
														{{item.name}}
													</view>
													<view class="flex-between flex1 mt-20">
														<view class="flex1" style="align-items: center;">
															<view class="diamondMall_limit">
																<image :src="item.author_image" mode="" class="photo"
																	style="border-radius: 50%;"></image>
															</view>
															<view class="diamondMall_number ml-20">
																{{item.author_name}}
															</view>
														</view>
													</view>
													<view class="flex1 flex-between mt-25 " style="">
														<view class="size-26" style="">
															共{{item.tcount}}个
														</view>
														<image class="collection"
															:src="item.is_focus==0?'../../static/home/aixinold.png':'../../static/home/aixinnew.png'"
															v-show="showUpImg" style="width: 40rpx;height: 40rpx;">
														</image>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20" height="450rpx" closeable>
			<view class="p10">
				<view class="flex1" style="align-items: center;">
					<view class="" style="    width: 100px;height: 100px;background-color: '';border-radius: 15px;">
						<image class="photo" :src="image" mode="" style="border-radius: 15px;"></image>
					</view>
					<view class="ml-20 ">
						<view class="fw size-32">
							{{name}}
						</view>
						<view class="mt-60">
							{{tcount}}个
						</view>
					</view>
				</view>
				<view class="mt-20">
					默认按编号排序
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;width:100%;justify-content: space-between;">
					<view class="popup_price mt-40" style="" @click="gohomeDetails()" v-for="item in myCollectprice">
						<view class="text-right  " style="">
							藏品
						</view>
						<view class="text-center popup_price_2 fw">
							￥{{price}}
						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myCollectprice: [],
				tcount: '',
				name: '',
				price: '',
				show: false,
				showUpImg: true,
				is_focus: '',
				image: "",
				name: '',
				id: 1,
				arrcreator: [],
				item: 0,
				query: {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: '',
					price_order: '',
					// goods_id:''
				},
				status: 'more',
				goods_id: [],
				tabs: [],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				list: [{
						name: '全部',
						index: 0,
					},
					{
						name: '持有中',
						index: 1,
					},
					{
						name: '挂售中',
						index: 2,
					},
					{
						name: '交易中',
						index: 3,
					},
					{
						name: '已出售',
						index: 4,
					},
					{
						name: '以转增',
						index: 5,
					},
					{
						name: '已合成',
						index: 6,
					},
				]
			}
		},
		onShow(options) {
			console.log(this.options);
			this.myCollectlist()
		},
		methods: {
			gohomeDetails() {
				console.log(this.id);
				uni.navigateTo({
					url: '/pages/home/homeDetails?id='+this.id
				})
			},
			// changeImg() {
			// 	console.log(this.showUpImg);
			// 	this.showUpImg = !this.showUpImg
			// 	this.$http('api/user/userFocus', {
			// 		goods_id: this.id,
			// type: 0
			// 	}, 'POST').then(res => {
			// 		console.log(res.msg);
			// 		uni.showToast({
			// 			title: res.msg,
			// 		})
			// 	});

			// },
			handeldiamondMallDetail(item) {
				this.show = true
				console.log(item);
				this.$http('api/goods/goodsDetail', {
					id: item
				}).then(res => {
					console.log(res);
					this.id=res.id
					this.image = res.image
					this.price = res.price
					this.name = res.name
					this.tcount = res.tcount

				})
				this.$http('api/orders/usersGoodsList', {
					status: this.current,
					id: item
				}).then(res => {
					console.log(res);
					this.myCollectprice = res

				})
			},
			myCollectlist() {
				this.$http('api/orders/usersGoodsListGroup', {
					status: this.current
				}).then(res => {
					// console.log(res);
					this.arrcreator = res
				})
			},
			backhomeDetails() {
				uni.navigateBack({
					url: '/pages/home/homeDetails'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				console.log(this.current);

				if (current == 0) {
					this.myCollectlist()
				} else if (current == 1) {
					this.myCollectlist()
				} else if (current == 2) {
					this.myCollectlist()
				} else if (current == 3) {
					this.myCollectlist()
				} else if (current == 4) {
					this.myCollectlist()
				} else if (current == 5) {
					this.myCollectlist()
				} else if (current == 6) {
					this.myCollectlist()
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {}
		}

	}
</script>

<style lang="less" scoped>
	.popup_price {
		background: #F5F5F5;
		width:220rpx;
		height: 120rpx;
		border-radius: 32rpx;
	}

	.popup_price_2 {}

	::v-deep  .u-tabs-scorll-flex {
		width: 200rpx;
	}

	::v-deep  .u-tabs-item {}

	#app {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.search-bar {
		padding: 30rpx 30rpx 30rpx;
	}

	.back {
		color: #FFF;
		margin: -50px 0px 0px 10px;
		font-size: 18px;
	}

	.page-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	//列表
	.data-item {
		height: 200rpx;
		border: 1rpx solid #000;
		margin: 10rpx;
	}

	.homeCreator {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.homeCreator_bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.headportrait {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.homeCreator-head-left {
		width: 100rpx;
		height: 100rpx;
		background-color: antiquewhite;
		border-radius: 50%;
		margin: 130rpx 40rpx 0px 50rpx;
	}

	.homeCreator-head-right {
		margin: 130rpx 0rpx 0px 0rpx;
	}

	.diamondMall_limit {
		background-color: #F8D3AE;
		width: 35px;
		height: 35px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
	}

	.diamondMall_number {
		// background-color: #FCF6E6;
		width: 70px;
		height: 20px;
		line-height: 20px;
		text-align: center;
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		// background-image: linear-gradient(to right, #EDB664, #D9C06C);
	}

	.sticky-fixed {
		/* #ifdef H5 */
		position: sticky;
		top: 44px;
		height: 54px;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		z-index: 999;
	}

	.sticky-fixed1 {
		/* #ifdef H5 */
		position: sticky;
		top: 97px;
		height: 60px;
		border-bottom: 1px solid #DDDDDD;
		z-index: 999;
		background-color: #FFF;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		z-index: 999;
		background-color: #FFF;
	}

	.my_diamond_logo {
		width: 45rpx;
		height: 45rpx;
		background-color: rgb(124, 113, 61);
		border-radius: 50%;
		text-align: center;
		line-height: 45rpx;
		font-size: 24rpx;
		color: #EEE06D;
	}

	.questionbox {
		// border: 1rpx solid red;
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #fff, #000);
		position: fixed;
		bottom: 14%;
		right: 8%;

		.add_question {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: #000;

			image {
				// border: 1rpx solid red;
				width: 100%;
				height: 100%;
			}
		}
	}

	.contbox {
		.contentitem {
			border-bottom: 1rpx solid #999;

			.leftbox {
				.text_title {
					font-weight: 600;
				}

				.tipsbox {
					margin-top: 16rpx;
					font-size: 12rpx;

					.tipsborder {
						border: 1rpx solid rgb(108, 126, 205);
						border-radius: 10rpx;
						color: rgb(108, 126, 205);
						background-color: rgb(239, 246, 255);
					}
				}
			}

			.rightbox {
				width: 260rpx;

				image {
					width: 260rpx;
				}
			}

			.contenttit {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tipsbox {
				margin-top: 16rpx;
				font-size: 12rpx;

				.tipsborder {
					border: 1rpx solid rgb(108, 126, 205);
					border-radius: 10rpx;
					color: rgb(108, 126, 205);
					background-color: rgb(239, 246, 255);
				}
			}
		}
	}

	.searchbox {
		.searchimg {
			width: 60rpx;
			height: 40rpx;
			border-right: 1rpx solid #999;

			image {
				width: 40rpx;
			}
		}

		.selectbox {

			.selectitem,
			.selectitem1 {
				font-size: 16rpx;
				color: #999;
				margin: 0 10rpx;
				border-radius: 40rpx;
				background-color: rgb(246, 246, 246);
				width: 140rpx;
				height: 60rpx;
				text-align: center;
			}

			.selectitem {
				color: #fff;
				background-color: rgb(0, 203, 211);
				width: 140rpx;
				height: 60rpx;
				text-align: center;
			}
		}
	}

	.toptitbox {
		width: 100%;
		border-bottom: 1rpx solid #f6f6f6;
	}

	.rightbox {
		width: 100%;
		position: relative;

		.popcontbox {
			height: 90%;
			position: relative;
			top: 6%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.popitem {
				color: #333;

				.poptit {
					margin: 20rpx 0;
				}

				.popcont {
					display: flex;
					flex-wrap: wrap;

					.contitem,
					.contitem1 {
						border: 1rpx solid rgb(248, 248, 248);
						background-color: rgb(248, 248, 248);
						padding: 10rpx 20rpx;
						margin: 10rpx;
					}

					.contitem1 {
						color: #44ACFF;
						background-color: rgba(#44ACFF, .1);
						position: relative;

						image {
							width: 16rpx;
							height: 16rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}

		.popbtn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #44ACFF;
			color: #fff;
			margin: 20rpx;
			border-radius: 40rpx;
		}
	}

	.imagebox {
		position: relative;

		.lockimg {
			position: absolute;
			top: 0;
			width: 80%;
			z-index: 999;
			left: 10%;
		}

		.itemTwoImg {
			width: 330rpx;
			height: 290rpx;
			border-radius: 20rpx;

		}

		.authorinfo {
			width: 100%;
			position: absolute;
			top: 20%;
			z-index: 999;
			text-align: center;

			.authname {
				font-size: 36rpx;
			}
		}

	}

	::v-deep  .u-action {
		color: #fff !important;
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.topIcon {
		width: 50rpx;
		height: 50rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	::v-deep  .u-action-active {
		color: #fff;
	}

	.midItem {
		width: 120rpx;
		height: 68rpx;
		color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.midActive {
		// border-bottom: 10rpx solid #44ACFF;
		color: #000;
		font-weight: 600;

		.line {
			width: 40%;
			height: 10rpx;
			position: relative;
			top: 9rpx;
			left: 30%;
			background-color: rgb(0, 203, 211);
		}
	}

	.rowImg {
		width: 36rpx;
		height: 36rpx;
	}

	.indexTwoItem {
		width: 330rpx;
		box-shadow: 0px 0px 10rpx 2rpx rgba(92, 95, 239, 0.1);
		border-radius: 10rpx;
		position: relative;
		font-size: 24rpx;
		color: #999;

		.itemTitle {
			font-weight: 550;
			color: #333;
			height: 100rpx;
		}

		.itemTwoImg {
			width: 330rpx;
			height: 290rpx;
			border-radius: 20rpx;
		}

		.itemTips {
			position: absolute;
			left: 0;
			top: 0;
			background: #5C5FEF;
			border-radius: 20rpx 0px 20rpx 0px;
			color: #fff;
			font-size: 22rpx;
			z-index: 10;
		}

		.authTwoImg {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.diamondMall_bottom {
		width: 100%;
		height: 100rpx;
		background-color: #FFF;
		border-radius: 40rpx 40rpx 0 0;
		margin: -40rpx 0 0 0;

	}

	.my_diamond_photo {
		width: 30rpx;
		height: 30rpx;
		line-height: 50rpx;
	}

	.diamondMall {
		width: 100%;
		height: 400rpx;
		// background-image: linear-gradient(to right, #EDB664, #D9C06C);
		// padding: 40rpx;
		position: relative;
	}

	.diamondMall_bg {
		position: absolute;
		top: 0;
		left: 0;
	}

	.my_diamond {
		width: 100%;
		height: 300rpx;
		background-color: #52483C;
		border-radius: 40rpx 40rpx 0px 0;
		margin: 60rpx 0 0 0;

	}

	.diamondMall_zuan::after {
		content: "";
		width: 5rpx;
		height: 50rpx;
		top: 40rpx;
		left: 150rpx;
		background-color: #5C5954;
		position: absolute;

	}

	.detailBrandside_bottom_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid #DADADA;
		border-radius: 10rpx;
	}

	.detailBrandside_bottom_text {
		width: 100%;
		// height: 350rpx;
		position: relative;
	}

	.detailBrandside_image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	.detailBrandside_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// width: 700rpx;


	}

	.detailBrandside_title {
		color: rgb(241, 158, 126);
		line-height: 480rpx;
		font-size: 44rpx;
	}

	.detailBrandside_text {
		width: 600rpx;
		height: 304rpx;
		letter-spacing: 1rpx;
		text-indent: 1rem;
		margin: -200rpx 0px 0px 80rpx;
	}

	.detailBrandside_top {
		// text-align: center;
		// line-height: 540rpx;
		color: #FFF;
		font-size: 24rpx;
	}

	.detailBrandside {
		width: 346rpx;
		height: 460rpx;
		margin: 0px 0px 170rpx 0px;

	}

	.detailBrandside_box {
		width: 100%;
		height: 100%;
		border-radius: 12px;
	}

	.detailBrandside_box_top {
		width: 100%;
		height: 70%;
		// background-color: antiquewhite;
	}
</style>
